import { useState, useRef } from 'react'

import LeftPanel from './modules/LeftPanel'
import RightPanel from './modules/RightPanel'
import { useRedisWrapperStyles } from './modules/styles.js'
import { Col, Flex, Row } from 'antd'
import { deepClone } from '@/utils'

//i18n
const RedisIndex = () => {
  const { styles } = useRedisWrapperStyles()
  const leftPanelRef = useRef(null)
  const [currentSource, setCurrentSource] = useState(null)
  const handleSetCurrentSource = (data) => {
    setCurrentSource(deepClone(data))
  }

  const handleTransferLeftPanel = (key, data) => {
    leftPanelRef.current[key](data)
  }

  return (
    <Flex vertical={true} className={styles.redisWrapper}>
      <div className="searchTableHeader">Redis</div>
      <Row className='redis-content'>
        <Col span={6} className='left-panel-wrapper'>
          <LeftPanel ref={leftPanelRef} currentSource={currentSource} setCurrentSource={handleSetCurrentSource} />
        </Col>
        <Col span={18} className='right-panel-wrapper'>
          <RightPanel key={currentSource ? currentSource.database + '--' + currentSource.key : 'empty'} currentSource={currentSource} onTransferLeftPanel={handleTransferLeftPanel} />
        </Col>
      </Row>
    </Flex>
  )
}

export default RedisIndex
